<template>
  <div class="gooditem-container" ref="gooditemRef">
    <!-- <div class="rand" v-if="rand">{{ rand }}</div> -->
    <div class="newCus" v-if="isNewCus">
      <div class="base"></div>
      <span>新客专享</span>
    </div>
    <div class="left">
      <div class="pic"><img :src="imgPath" alt="111" /></div>
      <!-- <div class="pic">
        <img :src="require('@/assets/img/yumi.jpg')" alt="111" />
      </div> -->
    </div>
    <div class="right">
      <div class="top">
        <div class="name">{{ name }}</div>
        <div class="price">¥{{ price }}</div>
      </div>
      <div class="bottom">
        <div class="store clearfix">库存{{ store }}件</div>
        <slot> </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { imgPath } from '@/utils/const'
export default {
  props: {
    image: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    price: {
      type: Number,
      default: 0
    },
    sales: {
      type: Number,
      default: -1
    },
    store: {
      type: Number,
      default: 0
    },
    isNewCus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // finalImg: require('@/asserts/img/yumi.png'),
      imgPath: imgPath + this.image,
      img: ''
    }
  },
  created() {
    // this.img = this.imgPath + this.pic
    // console.log(this.image)
    // console.log(this.imgPath)
  },
  mounted() {
    // if (!this.rand) {
    //   this.removeRand()
    // }
  },
  methods: {
    // getImg() {
    //   this.finalImg = require(imgPath)
    // }
    // removeRand() {
    //   this.$refs.gooditemRef.style.paddingTop = '0'
    //   // console.log(this.$refs.gooditemRef.style.paddingLeft='0')
    // }
  }
}
</script>

<style lang="less" scoped>
// @randHeight: 20px;
// @buttonHeight:40px;
.gooditem-container {
  position: relative;
  display: flex;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  border: black solid 1px;
  // padding-top: @randHeight;
  // flex-wrap: wrap;
  > .rand {
    position: absolute;
    top: 0;
    // height: @randHeight;
    font-size: 2rem;
  }
  .newCus {
    position: absolute;
    top: 0;
    left: 0;
    span {
      position: absolute;
      margin: 10px;
      top: 0;
      display: block;
      width: 55px;
      color: white;
    }
    .base {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid transparent;
    }
  }
  .left {
    float: left;
    flex: 1;
    .pic {
      display: block;
      margin: 5px;
      img {
        width: 76%;
        // width: 100px;
        // height: 70px;
        // scale: ();
      }
    }
  }
  .right {
    padding: 10px;
    position: relative;
    float: right;
    flex: 1;
    .top {
      .name {
        margin-bottom: 3px;
      }
    }
    .bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      .price,
      .sales,
      .store {
        float: left;
        line-height: 36px;
        margin-right: 40px;
        // float: left;
      }
      // .sales {
      //   // display: block;
      //   // float: right;
      // }
      // .store {
      //   // display: block;
      //   // float: right;
      // }
      .button {
        float: left;
      }
    }
  }
}
</style>
